<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- <p v-show="age>=18">成年</p>
			<p v-show="age<18">未成年</p> -->
			<p v-if="age>=18">成年</p>
			<p v-else-if="age<18">未成年</p>
			<hr>
			<p v-if="salary<=10">普通阶级</p>
			<p v-else-if="salary<=500">中产阶级</p>
			<p v-else="salary>500">富豪</p>
			<hr>
			<p v-for="i in hobby">{{i}}</p>
			<!-- <p v-for="i in hobby.length">{{hobby[i-1]}}</p> 成立-->
			<p v-for="i,index in hobby">{{index}}-{{i}}</p>
			<hr>
			<button v-on:click="show">O</button>
			<button v-on:click="show()">O</button>
			<button @click="show()">O</button>
			<hr><!-- v-bind后内容为vue变量 -->
			<a v-bind:href="site.url">baidu</a>
			<hr>
			<p v-text="sysname"></p><!-- text纯文本输出（不识别标签） -->
			<p v-html="sysname"></p><!-- html超文本输出（识别标签） -->
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				age:0,
				salary:9994594949494949798,
				hobby:["123","456","789"],
				site:{
					name:"ddddd",
					url:"https://www.baidu.com"
				},
				sysname:"<b>嘟嘟<b>123"
			},
			methods:{
				show:function(){
					console.log("嘟噜嘟噜")
				}
			}
		})
	</script>
</html>
